<template>
	<view :style="themeColor" style="overflow-x: hidden;">
		<view class="page">
			<view class="flex benben-position-layout  align-center mallPage_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<text class='mallPage_fd0_0_c0'>商城</text>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout mallPage_flex_1">
				<view class='flex flex-direction flex-wrap align-stretch'>
					<view class='flex flex-wrap align-center mallPage_fd1_0_c0'>
						<view class='flex flex-wrap flex-sub align-center mallPage_fd1_0_c0_c0'
							@tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/sousuo/searchMall/searchMall`">
							<image class='mallPage_fd1_0_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"482.png"'></image>
							<input type="text" :placeholder="`搜索你想要的商品`" confirm-type="done" :maxlength="-1"
								:disabled='true' placeholder-style="color:#999;font-size:28rpx" />
						</view>
						<!-- <view class='flex flex-wrap align-center mallPage_fd1_0_c0_c1' @tap.stop="handleJumpDiy"
							data-type="navigateTo"
							:data-url="`/pages/grzx/commodityClassification/commodityClassification`"
							v-if="data=='2' && IS_OPEN_FUNC1">
							<view class='flex flex-wrap align-center mallPage_fd1_0_c0_c1_c0'>
								<image class='mallPage_fd1_0_c0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"572.png"'>
								</image>
							</view>
						</view> -->
					</view>
					<!-- <view class='flex flex-wrap align-center justify-between mallPage_fd1_0_c1'>
						<image class='mallPage_fd1_0_c1_c0' mode="aspectFit" :src='routerInfoData.goods_image_wc'
							@tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/sousuo/goodsList/goodsList?ot=2`"></image>
						<image class='mallPage_fd1_0_c1_c0' mode="aspectFit" :src='routerInfoData.goods_image_jf'
							@tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/grzx/inteGral/inteGral`"></image>
						<image class='mallPage_fd1_0_c1_c0' mode="aspectFit" :src='routerInfoData.goods_image_ys'
							@tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/grzx/newProduct/newProduct`"></image>
					</view> -->
					<view class='flex flex-wrap align-center mallPage_fd1_0_c2'>
						<view style="position: relative">
							<swiper ref="benbenSwiperfd1_0_c2_c0"
								@change="bannerIndexfd1_0_c2_c0 = $event.detail.current"
								class='flex position-relative mallPage_fd1_0_c2_c0' previous-margin="0rpx"
								next-margin="0rpx" :display-multiple-items="1" :interval="5000" :duration="500"
								:autoplay='true' :circular='true'>
								<swiper-item class='flex  mallPage_fd1_0_c2_c0' v-for="(item,index) in bannerData"
									:key="index" @click="bannerNav(item)">
									<image class='mallPage_fd1_0_c2_c0_c1_c0' mode="aspectFill" :src='item.thumb'>
									</image>
								</swiper-item>
							</swiper>
							<view style="position: absolute" class="flex dot flex align-center justify-center mallPage_swiperDotfd1_0_c2_c0">
								<template v-for="(item, index) in bannerData">
									<view :key="index" v-if="bannerIndexfd1_0_c2_c0 == index"
										class="flex dot selected flex align-center justify-center mallPage_swiperDotSelectedfd1_0_c2_c0">
									</view>
									<view :key="index" v-else
										class="flex dot unselected flex align-center justify-center mallPage_swiperDotUnselectedfd1_0_c2_c0">
									</view>
								</template>
							</view>
						</view>
						
					</view>
					<view class="fenlei">
						<view class="fenlei_item" v-for="(item, index) in classificationList" :key="index" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/sousuo/goodsList/goodsList?cid=${item.id}`">
							<image :src='item.thumb' mode="aspectFill"></image>
							<view class="">{{item.name}}</view>
						</view>
						<view class="fenlei_item" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/grzx/commodityClassification/commodityClassification`">
							<image :src='STATIC_URL+"432.png"' mode=""></image>
							<view class="">全部分类</view>
						</view>
					</view>
					<!-- <view class='flex flex-direction flex-wrap align-stretch mallPage_fd1_0_c3'>
						<view class='flex flex-wrap align-center mallPage_fd1_0_c3_c0' @tap.stop="handleJumpDiy"
							data-type="navigateTo" :data-url="`/pages/sousuo/goodsList/goodsList`">
							<text class='mallPage_fd1_0_c3_c0_c0'
								style="font-family: Alimama DongFangDaKai;">新品专区</text>
							<text class='mallPage_fd1_0_c3_c0_c1'>查看更多</text>
							<image class='mallPage_fd1_0_c3_c0_c2' mode="aspectFit" :src='STATIC_URL+"577.png"'></image>
						</view>
						<view class='flex flex-wrap align-center justify-between'>
							<image v-for="item in newGoodsData" :key="item.aid" class='mallPage_fd1_0_c3_c1_c0'
								mode="aspectFill" :src='item.thumb' @tap.stop="handleJumpDiy" data-type="navigateTo"
								:data-url="`/pages/grzx/merchanDisedetails/merchanDisedetails?id=`+item.id"></image>
						</view>
					</view> -->
					
					<view style="width: 100%;height: 20rpx;background: #f6f7f9;"></view>
					
					<view class='flex flex-direction flex-wrap align-stretch good_list'>
						<view class='flex flex-wrap align-center justify-center mallPage_fd1_0_c4_c0'>
							<view class='flex flex-wrap align-center'>
								<image class='mallPage_fd1_0_c4_c0_c0_c0' mode="aspectFill" :src='STATIC_URL+"580.png"'>
								</image>
								<text class='mallPage_fd1_0_c4_c0_c0_c1'>为您推荐</text>
								<image class='mallPage_fd1_0_c4_c0_c0_c0' mode="aspectFill" :src='STATIC_URL+"579.png"'>
								</image>
							</view>
						</view>
						<view class='flex flex-wrap align-center justify-between flex-sub'>
							<Good v-for="(item, index) in goodList" :key="index" :item="item" />
						</view>
					</view>
				</view>
			</view>

			<fu-empty v-if="goodListLoading"></fu-empty>
			<fu-empty-ui v-else-if="goodListEmpty"></fu-empty-ui>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center mallPage_flex_2">
				<view class='flex flex-wrap align-center' @tap.stop="toCar()" data-type="navigateTo"
					:data-url="`/pages/grzx/merchanDisedetails/merchanDisedetails`" style="position: relative;">
					<image class='mallPage_fd2_0_c0' mode="aspectFit" :src='STATIC_URL+"582.png"'></image>
					<view class="num_box" v-if="carNum">{{carNum}}</view>
				</view>
			</view>

			<!---flex布局flex布局结束-->


		</view>
	</view>
</template>
<script>
	import {
		goodModuleMixin
	} from './goodModuleMixin'
	import {
		newGoodsModuleMixin
	} from './newGoodsModuleMixin'
	import {
		bannerModuleMixin
	} from './bannerModuleMixin'
	import {
		routerInfoModuleMixin
	} from './routerInfoModuleMixin'
	import {
		IS_OPEN_FUNC1
	} from '@/const/switchs.js'
	import Good from './Good.vue'
	export default {
		components: {
			Good
		},
		mixins: [newGoodsModuleMixin, bannerModuleMixin, goodModuleMixin, routerInfoModuleMixin, ],
		data() {
			return {
				"bannerIndexfd1_0_c2_c0": 0,
				"data": "2",
				IS_OPEN_FUNC1,
				carNum: 0,
				classificationList: [],
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
		},
		onShow() {
			this.getCarNum()
		},
		onLoad() {
			this.getClassInfo();
		},
		methods: {
			async getCarNum() {
				if (!uni.getStorageSync('USER_TOKEN')) {
					return this.carNum = 0;
				} else {
					const res = await this.$post('6551c67b47914', {
						page: 1
					});
					const _num = res.data.total;
					this.carNum = _num > 99 ? "99+" : _num;
				}
			},
			toCar() {
				if (uni.getStorageSync('USER_TOKEN')) uni.navigateTo({
					url: "/pages/grzx/myNews/shoppingCart"
				})
				else uni.navigateTo({
					url: "/pages/tabBar/passwordLogin/passwordLogin"
				})
			},
			// 分类列表
			getClassInfo() {
				this.$api.post(global.API_VERSION + '65ab699906363', {
				
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						if (res.data.data.length > 4) {
							this.classificationList = res.data.data.slice(0, 4);
						} else {
							this.classificationList = res.data.data;
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import './mallPage.scss';

	.mallPage_flex_2 {
		.num_box {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 1;
			min-width: 32rpx;
			height: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background-color: #f00;
			color: #fff;
			font-size: 24rpx;
			padding: 0 4rpx;
			box-sizing: border-box;
		}
	}
	.fenlei {
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding: 32rpx;
		.fenlei_item {
			font-size: 26rpx;
			text-align: center;
			image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-bottom: 16rpx;
			}
		}
	}
	.good_list {
		padding: 0 24rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
	}
</style>